<template>
  <div class="order-manage">
    <div class="order-manage_body">
      <div class="list-title">
        <span
          v-for="it in navList"
          :key="it.value"
          :class="{ on: activeName === it.value }"
          @click="activeName = it.value"
        >
          {{ it.title }}
        </span>
      </div>
      <template v-if="initObj.vip">
        <OrderTable
          :timeList="timeList"
          class="order-manage-box"
          v-show="activeName === 'vip'"
        />
      </template>
      <template v-if="initObj.exchange">
        <ExchangeTable
          :timeList="timeList"
          class="order-manage-box"
          v-show="activeName === 'exchange'"
        />
      </template>
      <template v-if="initObj.tsb">
        <TsbTable
          :timeList="timeList"
          class="order-manage-box"
          v-show="activeName === 'tsb'"
        />
      </template>
    </div>
  </div>
</template>
<script setup lang="ts" name="OrderList">
import { watch, ref, computed, onMounted, onUnmounted } from "vue";
import OrderTable from "./components/order-table.vue";
import ExchangeTable from "./components/exchange-table.vue";
import TsbTable from "./components/tsb-table.vue";
import { parseTime } from "@/utils";
import { storeToRefs } from "pinia";
import { userAppStore } from "@/stores/user";
import { messageAppStore } from "@/stores/message";
import { systemAppStore } from '@/stores/system'
const _userAppStore_ = userAppStore();
const _messageAppStore_ = messageAppStore();
const { hasLogin } = storeToRefs(_userAppStore_);
const { openOrderTabNotice } = storeToRefs(_messageAppStore_);
const initObj = ref<any>({});
const activeName = ref("vip");
const timeList = ref<any[]>([]);

const showTsb = computed(() => systemAppStore().showTsb)
const navList = computed(() => {
  const list = [{ value: "vip", title: "订单记录" }];
  list.push({ value: "exchange", title: "兑换记录" });
  if (showTsb.value) {
    list.push({ value: "tsb", title: "翻译币明细" });
  }
  return list;
});
watch(hasLogin, () => {
  activeName.value = "vip";
  navList.value.forEach(({ value }) => {
    if (activeName.value !== value) {
      initObj.value[value] = false;
    }
  });
});
watch(activeName, (val) => {
  !initObj.value[val] && (initObj.value[val] = true);
}, { immediate: true });
watch(openOrderTabNotice, ({ tab }) => {
  navList.value.some(({ value }) => tab === value) &&
    (activeName.value = tab);
});
onMounted(() => {
  const now = new Date();
    const nowStr = parseTime(now);
    const oneM = parseTime(now.setMonth(now.getMonth() - 1));
    const threeM = parseTime(now.setMonth(now.getMonth() - 2));
    const sixM = parseTime(now.setMonth(now.getMonth() - 3));
    const oneY = parseTime(now.setMonth(now.getMonth() - 6));
    const list = [
      {
        orderId: 1764,
        exchangeId: 1775,
        zbId: 24002,
        name: "全部",
        begin_date: null,
        end_date: null
      },
      {
        orderId: 1765,
        exchangeId: 1776,
        zbId: 24003,
        name: "近1个月",
        begin_date: oneM,
        end_date: nowStr
      },
      {
        orderId: 1766,
        exchangeId: 1777,
        zbId: 24004,
        name: "近3个月",
        begin_date: threeM,
        end_date: nowStr
      },
      {
        orderId: 1767,
        exchangeId: 1778,
        zbId: 24005,
        name: "近6个月",
        begin_date: sixM,
        end_date: nowStr
      },
      {
        orderId: 1768,
        exchangeId: 1779,
        zbId: 24006,
        name: "近1个年",
        begin_date: oneY,
        end_date: nowStr
      }
    ];
    timeList.value = list;

    const { tab } = openOrderTabNotice.value;
    if (tab && navList.value.some(({ value }) => tab === value)) {
      activeName.value = tab;
    }
});
</script>
<style lang="scss">
.order-manage {
  position: relative;
  padding: 5px;
  overflow: hidden;
  .order-manage_body{
    padding: 25px 20px 25px 25px;
    height: 100%;
    // overflow: scroll;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .list-title {
    flex-shrink: 0;

    height: 56px;
    margin-bottom: 20px;
    padding: 0 40px;
    line-height: 56px;
    background: rgba(51,51,51,0.05);
    border-radius: 10px;

    span {
      margin-right: 24px;
      color: var(--el-text-color-primary);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.25s ease-in-out;
      font-weight: 400;
      font-size: 14px;
      color: var(--el-text-color-primary);
      line-height: 16px;

      &.on {
        font-weight: bold;
      }

      &:hover {
        color: var(--el-color-primary);
      }

      &.on {
        font-weight: bold;
        color: var(--el-color-primary);
      }
    }
  }
}
.order-manage-box{
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.order-table {
  flex: 1 0 0;
  overflow: hidden;
  user-select: text;
  * {
    user-select: text;
  }

  th {
    &.el-table__cell {
      background: transparent !important;
    }

    &.order-last-header {
      border-radius: 0 4px 4px 0;
    }
    &:first-child {
      border-radius: 4px 0 0 4px;
    }
  }
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
  tbody tr:hover {
    color: var(--el-color-primary);
  }
}
.order-dropdown-box {
  flex-shrink: 0;
  flex: 0 0 20px;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
  .xz-dropdown-link {
    font-size: 12px;
    color: var(--el-text-color-primary);
    cursor: pointer;
    outline: none;
    .svg-icon {
      margin-left: 2px;
    }
  }

  .order-tips {
    flex: 1;
    padding-right: 10px;
    color: var(--el-color-info);
    .svg-icon {
      margin-right: 5px;
      color: var(--el-color-danger);
    }
  }
}
.order-manage {
  .el-loading-mask {
    background-color: rgba($color: #fff, $alpha: 0.1);
  }
}
.order-pagination {
  justify-content: flex-end;
  margin-top: 10px;
  flex: 0 0 24px;
}
</style>
